<template>
    <div class="publish" v-if="AllData !== null">
        <!-- 轮播图 -->
        <div class="Banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in BannerData" :key="index">
                    <img :src="item.cover" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 分类 -->
        <div class="sort">
            <div class="sort-item" v-for="(item, index) in SortData" v-if="AllData.length > 0" @click="enterList(item.url.split('?')[1], item.title)">
                <!-- shortCut -->
                <div class="img-box">
                    <img :src="item.cover" />
                </div>
                <div class="text">{{ item.name }}</div>
            </div>
        </div>
        <!-- 本周人气榜 -->
        <div class="week">
            <div class="title">{{ AllData[2].name }}</div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in WeekData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <b :class="'icon_' + `${index + 1}`"></b>
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="name">{{ item.title }}</div>
                </div>
            </div>
            <div class="more-icon" @click="goTopClassify">
                <div class="more">查看榜单</div>
                <div class="img-box icon-more">
                    <img class="img-auto" src="../assets/images/more.png" />
                </div>
            </div>
        </div>
        <!-- 悬疑推理 -->
        <div class="suspense">
            <div class="title">{{ AllData[3].name }}</div>
            <div class="suspense-item-box">
                <div class="suspense-item" v-for="(item, index) in SuspenseData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 精品小说 -->
        <div class="Boutique">
            <div class="title">{{ AllData[3].name }}</div>
            <div class="Boutique-item" v-for="(item, index) in BoutiqueData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="AD">
            <img class="img-auto" :src="item.cover" v-for="(item, index) in ADData" :key="index" />
        </div>
        <!-- 历史文化 -->
        <div class="history">
            <div class="title">{{ AllData[6].name }}</div>
            <div class="history-item-box">
                <div class="history-item" v-for="(item, index) in HistoryData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 经管励志 -->
        <div class="intensity-box">
            <div class="title">{{ AllData[7].name }}</div>
            <!-- 第一本书 -->
            <div class="first" v-for="item in AdministeredOne" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="BookTitle">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 四本书 -->
        <div class="Books">
            <div class="Books-item" v-for="(item, index) in Administered" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="name">{{ item.title }}</div>
                <div class="author">{{ item.author }}</div>
            </div>
        </div>
        <!-- 青春言情 -->
        <div class="Romance">
            <div class="title">{{ AllData[8].name }}</div>
            <div class="Romance-item-box">
                <div class="Romance-item" v-for="(item, index) in RomanceData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 超值套装 -->
        <div class="suit">
            <div class="title">{{ AllData[9].name }}</div>
            <div class="suit-item" v-for="(item, index) in SuitData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 品质生活 -->
        <div class="live">
            <div class="title">{{ AllData[10].name }}</div>
            <div class="live-item" v-for="(item, index) in LiveData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 学习充电 -->
        <div class="study">
            <div class="title">{{}}</div>
            <div class="study-item" v-for="(item, index) in StudyData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 底部广告图 -->
        <div class="AD">
            <img class="img-auto" :src="item.cover" v-for="(item, index) in FootADData" :key="index" />
        </div>
        <div class="foot">我是有底线的(*^▽^*)</div>
    </div>
</template>

<script>
import { getPublish } from "../api/PublishData.js";
export default {
    name: "Publish",
    data() {
        return {
            AllData: null,
            BannerData: null,
            // 分类数据
            SortData: null,
            // 本周人气榜
            WeekData: null,
            // 悬疑推理
            SuspenseData: null,
            // 精品小说
            BoutiqueData: null,
            // 广告图
            ADData: null,
            // 历史文化
            HistoryData: null,
            // 经管励志
            Administered: null,
            // 第一本书
            AdministeredOne: [],
            // 青春言情
            RomanceData: null,
            // 超值套装
            SuitData: null,
            // 品质生活
            LiveData: null,
            // 学习充电
            StudyData: null,
            // 底部广告图
            FootADData: null,
        };
    },
    created() {
        this.getPublish();
    },
    methods: {
        getPublish() {
            this.axios({
                method: "get",
                url: "store/show.json",
                params: {
                    type: "publish",
                    uuid: "b5648dd3c4f24d9796f590cd81ca076e",
                },
            })
                .then((res) => {
                    this.AllData = res.data.data.list;
                    // 轮播图
                    this.BannerData = this.AllData[0].banners;
                    // 分类数据
                    this.SortData = this.AllData[1].shortCut;

                    // 本周人气榜
                    this.WeekData = this.AllData[2].list;
                    // 悬疑推理
                    // this.SuspenseData = this.AllData[3].list;
                    // 精品小说
                    this.BoutiqueData = this.AllData[3].list;
                    // 广告图
                    this.ADData = [this.AllData[4]];
                    // 历史文化
                    this.HistoryData = this.AllData[6].list;
                    // 经管励志
                    this.Administered = this.AllData[7].list;
                    this.Administered.forEach((item, index) => {
                        // 单独拿出第一个数据
                        if (index == 0) {
                            this.AdministeredOne.push(item);
                        }
                    });
                    // // 删掉第一个数据
                    this.Administered.shift();
                    // 青春言情
                    this.RomanceData = this.AllData[8].list;
                    // 超值套装
                    this.SuitData = this.AllData[9].list;
                    // 品质生活
                    this.LiveData = this.AllData[10].list;
                    // 学习充电
                    this.StudyData = this.AllData[11].list;

                    // 底部广告图
                    this.FootADData = [this.AllData[12]];
                })
                .catch((err) => {
                    "请求出错了=>", err;
                });
        },
        // 进入书单列表
        enterList(url, title) {
            if (title == "排行") {
                // 跳转排行榜
                this.$router.push({
                    name: "TopClassify",
                });
                // 跳转书单列表
            } else {
                this.$router.push({
                    name: "BookList",
                    query: {
                        url,
                        title,
                    },
                });
            }
        },
        // 跳转书籍详情
        goBookDetails(BookId, title) {
            this.$router.push({
                name: "BookDetails",
                query: {
                    BookId,
                    title,
                },
            });
        },
        goTopClassify() {
            this.$router.push({
                name: "TopClassify",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.publish {
    height: 522px;
    overflow-y: auto;
    background-color: #f7f8f8;
    // 去掉滚动条
    &::-webkit-scrollbar {
        display: none;
    }

    .AD {
        width: 350px;
        height: 104px;
        margin: 10px auto;
    }
    .foot {
        width: 100%;
        height: 40px;
        background-color: #ecefef;
        text-align: center;
        line-height: 40px;
    }

    .Books {
        width: 350px;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 15px;

        .Books-item {
            width: 22%;
            margin-right: 16px;
            img:nth-child(3) {
                height: 99px;
            }
            &:nth-child(4) {
                margin-right: 0;
            }
            .name {
                width: 74px;
                font-size: 14px;
                margin: 5px 0;
            }
            .author {
                width: 90px;
                color: #686969;
                // 不要自动换行
                white-space: nowrap;
                overflow: hidden;
                // 溢出显示省略号
                text-overflow: ellipsis;

                // 显示两行
                -webkit-line-clamp: 2;
            }
        }
    }
    .intensity-box {
        width: 350px;
        margin: 20px auto;
        .first {
            width: 100%;
            margin: 0 auto;
            display: flex;
            .img-box {
                width: 80px;
                height: 100px;
            }
            .RigMsg {
                margin-left: 10px;
                width: calc(100% - 80px);
                .BookTitle {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示两行
                    -webkit-line-clamp: 2;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 10px;
                }
                .desc {
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                }
            }
        }
        .title {
            width: 80px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }

    .Boutique,
    .suit,
    .live,
    .study {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        margin-left: 20px;
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 -5px 0;
        }
        .Boutique-item,
        .suit-item,
        .live-item,
        .study-item {
            width: 100%;
            margin: 15px auto;
            display: flex;
            .img-box {
                width: 20%;
                height: 100px;
            }
            .RigMsg {
                width: calc(80% - 15px);
                margin-left: 10px;
                .name {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                    width: 257px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示一行
                    -webkit-line-clamp: 1;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 15px;
                }
                .desc {
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                    text-align-last: left;
                    color: #686969;
                }
            }
        }
    }

    .suspense,
    .history,
    .Romance {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 40px;

        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 5px 5px;
        }
        .suspense-item-box,
        .history-item-box,
        .Romance-item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            margin-bottom: 80px;
            .suspense-item,
            .history-item,
            .Romance-item {
                width: 25%;
                margin-right: 17px;
                .img-box {
                    width: 100%;
                    height: 80px;
                }
                .name {
                    width: 74px;
                    font-size: 14px;
                    margin: 5px 0;
                    width: 74px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示两行
                    -webkit-line-clamp: 1;
                }
                .author {
                    color: #686969;
                    width: 74px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示两行
                    -webkit-line-clamp: 1;
                }
            }
        }
    }

    .Banner {
        width: 350px;
        // background-color: pink;
        margin: 10px auto;
        .van-swipe-item {
            text-align: center;
            img {
                width: 96%;
                display: inline-block;
            }
        }
        ::v-deep {
            .van-swipe__indicators {
                position: fixed;
                bottom: 8px;
                left: 8%;
            }
        }
    }

    .week {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 10px;
        .more-icon {
            display: flex;
            .more {
                width: 50px;
                color: #686969;
                display: block;
                margin: 20px auto;
            }
            .icon-more {
                position: relative;
                width: 16px;
                height: 16px;
                top: 20px;
                left: -140px;
            }
        }
        .item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            .item {
                width: calc(33.333%);
                margin-right: 18px;
                position: relative;
                b {
                    position: absolute;
                    top: -12px;
                    left: 0px;
                    right: 0;
                    width: 100%;
                    height: 40px;
                    z-index: 9;
                }
                .icon_1 {
                    background: url(../assets/images/icon_1.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_2 {
                    background: url(../assets/images/icon_2.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_3 {
                    background: url(../assets/images/icon_3.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .img-box {
                    width: 100%;
                    height: 73%;
                }
                .name {
                    // width: 100%;
                    height: 13%;
                    width: 74px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示两行
                    -webkit-line-clamp: 1;
                    margin: 20px 0 0 0;
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }

    .sort {
        width: 350px;
        height: 60px;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 10px;
        .sort-item {
            width: 25%;
            .img-box {
                width: 75%;
                height: 80%;
                text-align: center;
                margin: 0 0 0 10px;
                img {
                    width: 70%;
                    margin: -5px auto;
                }
            }
            .text {
                width: 100%;
                text-align: center;
            }
        }
    }
}
</style>
